﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true" CodeBehind="Position.aspx.cs" Inherits="ControlExplorer.C1RadialGauge.Position" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Gauge" TagPrefix="Wijmo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<Wijmo:C1RadialGauge runat="server" ID="Gauge1" Value="100" Max="150" 
		StartAngle="-45" SweepAngle="270" Radius="170">
		
<TickMajor Position="Inside" Factor="2" Visible="True" Offset="-5" Interval="10"></TickMajor>

<TickMinor Position="Inside" Visible="True" Offset="0" Interval="2"></TickMinor>

<Pointer Length="0.8" Width="4" Offset="0.15"></Pointer>

<Labels Offset="-10">
	<LabelStyle Stroke="#556A7C">
		<Fill Color="#556A7C">
		</Fill>
	</LabelStyle>
		</Labels>

<Animation Duration="2000" Easing="EaseOutBack"></Animation>
		<Face>
			<FaceStyle StrokeWidth="0">
			</FaceStyle>
		</Face>
		<Ranges>
			<Wijmo:GaugelRange EndDistance="1" EndValue="50" EndWidth="20" 
				StartDistance="1" StartValue="20" StartWidth="15">
				<RangeStyle Stroke="#BC8A8E">
					<Fill Color="#BC8A8E">
					</Fill>
				</RangeStyle>
			</Wijmo:GaugelRange>
		</Ranges>
		
	</Wijmo:C1RadialGauge>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ControlOptions" runat="server">
<div>
						<p>
							指针</p>
						长度:<input id="p_length" type="text" />
						偏移量:<input id="p_offset" type="text" />
						<p>
							标签</p>
						偏移量:<input id="l_offset" type="text" />
						<p>
							刻度</p>
						偏移量:<input id="t_offset" type="text" />
						位置:<select id="t_position"><option value="inside">内部</option>
							<option value="outside">外部</option>
						</select>
						<p>
							量程1</p>
						开始距离<input id="rs_distance" type="text" />
						结束距离<input id="re_distance" type="text" />
						<br />
						<input id="applyOption" type="button" value="应用" />
					</div>
<script type="text/javascript">
	$(document).ready(function () {
		$("#applyOption").click(function () {
			var option = {}, pointer = {}, label = {}, tick = {}, range1 = {};
			pointer.length = getInputNum("p_length");
			pointer.offset = getInputNum("p_offset");
			label.offset = getInputNum("l_offset");
			tick.offset = getInputNum("t_offset");
			tick.position = $("#t_position").val();
			range1 = $("#<%=Gauge1.ClientID %>").c1radialgauge("option", "ranges")[0];
			range1.startDistance = getInputNum("rs_distance");
			range1.endDistance = getInputNum("re_distance");

			option.pointer = pointer;
			option.labels = label;
			option.tickMinor = tick;
			option.tickMajor = tick;
			option.ranges = [];
			option.ranges[0] = range1;

			$("#<%=Gauge1.ClientID %>").c1radialgauge("option", option);
		});

		var getInputNum = function (id) {
			var val = $("#" + id).val();
			return val ? parseFloat(val) : 1;
		}
	});
	
	</script>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="Description" runat="server">
	<p>此示例展示了怎样使用<b>TickMajor</b> 和 <b>TickMinor</b> 属性的 <b>Position</b> 子属性来自定义主要刻度和次要刻度的外观和位置。</p>
	<p>Position 属性可以设置为内部 和 外部。</p>

</asp:Content>
